// 以下两个用于随机模拟生成测试数据
function getDateStr(dat) {
	var y = dat.getFullYear();
	var m = dat.getMonth() + 1;
	m = m < 10 ? '0' + m : m;
	var d = dat.getDate();
	d = d < 10 ? '0' + d : d;
	return y + '-' + m + '-' + d;
}

function randomBuildData(seed) {
	var returnData = {};
	var dat = new Date("2016-01-01");
	var datStr = ''
	for (var i = 1; i < 92; i++) {
		datStr = getDateStr(dat);
		returnData[datStr] = Math.ceil(Math.random() * seed);
		dat.setDate(dat.getDate() + 1);
	}
	return returnData;
}

var aqiSourceData = {
	"北京": randomBuildData(500),
	"上海": randomBuildData(300),
	"广州": randomBuildData(200),
	"深圳": randomBuildData(100),
	"成都": randomBuildData(300),
	"西安": randomBuildData(500),
	"福州": randomBuildData(100),
	"厦门": randomBuildData(100),
	"沈阳": randomBuildData(500)
};

// 用于渲染图表的数据
var chartData = {};

// 记录当前页面的表单选项
var pageState = {
	nowSelectCity: -1,
	nowGraTime: "day"
}

function proDiv(height1, title1) { //调用一次插入一个div柱状图
	var fdiv = document.getElementsByClassName("aqi-chart-wrap");
	var div = document.createElement("div");
	div.style.height = height1 + "px";
	div.title = title1;
	fdiv[0].appendChild(div);
	//return div;
}

function renderChart() { //渲染(初始化的时候调用,改变的时候调用)
	var delDiv = document.getElementsByClassName("aqi-chart-wrap")[0];
	var delChild = delDiv.children;
	var delDivLength = delChild.length
	console.log("删除" + delChild.length)
	for (var i = 0; i < delDivLength; i++) { //length要另外拿出来,应为在动态减少
		delDiv.removeChild(delDiv.children[0]); //参数用0,不能用i,因为删除过程length在改变(减少)
	}
	console.log("剩" + delChild.length)
	var dCity = pageState.nowSelectCity;
	var dGra = pageState.nowGraTime;
	chartData = aqiSourceData[dCity]; //得到91天的数据 
	console.log("准备渲染:" + dCity + "  ddddd " + dGra + " ddddd");
	switch (dGra) {
		case "day":
			console.log("day");
			for (var na in chartData) {
				//console.log(na+"星期=="+new Date(na).getDay());
				proDiv(chartData[na], na);
			}
			break;

		case "week":
			console.log("week");
			for (var na in chartData) {
				var weekDiv;
				var w;
				weekDiv += chartData[na];
				w = w + 1;
				console.log("--" + new Date(na).getDay() + " weeK-" + w + " chartData-" + chartData[na] + " ")
				if (new Date(na).getDay() == 0) { //星期天结算
					proDiv(weekDiv / w, na); //得到一星期的平均值
					console.log("星期:" + new Date(na).getDay() + ";;" + weekDiv + "  " + w + "  " + weekDiv / w)
					weekDiv = 0;
					w = 0;
				}
			}
			break;
		case "month":
			console.log("month");
			for (var na in chartData) {
				var weekDiv2;
				var w2;
				weekDiv2 += chartData[na];
				w2 = w2 + 1;
				if (new Date(na).getDate() == 1) {
					proDiv(weekDiv2 / w2, na); //得到月平均
					weekDiv2 = 0;
					w2 = 0; 
				}
			}
			break;
		default:
			break;
	}
	for (var name in chartData) {
		//Div(chartData[name]);
	}
}

function graTimeChange() { //日、周、月的radio事件点击时的处理函数
	pageState.nowGraTime = this.value
	renderChart();
}

function citySelectChange() { //select发生变化时的处理函数
	var ops = document.getElementById("city-select").options;
	for (var i = 0; i < ops.length; i++) {
		if (ops[i].selected) {
			pageState.nowSelectCity = ops[i].text;
		}
	}
	renderChart(); //调用渲染
}

function initGraTimeForm() { //初始化,绑定改变监听
	var gra = document.getElementsByName("gra-time");
	for (var i = 0; i < gra.length; i++) {
		gra[i].onclick = graTimeChange;
	}
}

function Op(tex) { //生成一个下拉选项
	var op = document.createElement("option");
	op.text = tex;
	return op;
}
 
function initCitySelector() {
	var cSele = document.getElementById("city-select");
	for (var name in aqiSourceData) { //生成一些下拉选项
		var op = new Op(name);
		cSele.add(op, null);
	}
	cSele.onchange = citySelectChange; //给下拉绑定监听
}

function initAqiChartData() { //初始化图表需要的数据格式
	var op1 = document.getElementById("city-select").options[0]; //得到选项列表的第一项
	op1.selected = true; //设第一项为默认选中(这里不会自动调用change函数)
	pageState.nowSelectCity = op1.text;
	console.log("第一次初始化");
	renderChart()
}

/**
 * 初始化函数
 */
function init2() {
	console.log(new Date(2016 - 01 - 01).getDay());
	initGraTimeForm()
	initCitySelector();
	initAqiChartData();

}

init2();